<template>
  <div>
    <div class="top-btnss">
      <el-button type="primary" size="mini" @click="goAdd">新增</el-button>
    </div>
    <el-table :data="list" border stripe>
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <template>
            <el-button
              v-if="updateBtn"
              type="success"
              size="mini"
              @click="showDetail(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="updateBtn"
              type="primary"
              size="mini"
              @click="goEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              v-if="deleteBtn"
              type="danger"
              size="mini"
              @click="handleDeleteOne(scope.row.id)"
              >删除</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="详情"
      :visible.sync="detailDialog"
      width="40%"
      @close="closeDetail"
    >
      <el-form
        :model="detailForm"
        ref="detailForm"
        label-width="100px"
        :inline="true"
        size="small"
      >
        <el-form-item
          v-for="item in columns"
          :key="item.prop"
          :label="item.label"
        >
          <el-input v-model="detailForm[item.prop]" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { deleteById } from '@/api/common'
import getListMix from '@/mixins/getListMix'
import commonApi from '@/api/common'
export default {
  name: 'Table',
  data() {
    return {
      allListApi: commonApi.allList,
      detailDialog: false,
      detailId: 0,
      detailForm: {}
    }
  },
  mixins: [getListMix],
  props: {
    list: {
      type: Array,
      default: () => {},
    },
    columns: {
      type: Array,
      default: () => {},
    },
    savePath: {
      type: String,
      default: '',
    },
    updateBtn: {
      type: Boolean,
      default: true,
    },
    deleteBtn: {
      type: Boolean,
      default: true,
    },
    apiName: {
      type: String,
      default: '',
    },
  },
  methods: {
    // 跳转到新增
     goAdd() {
      this.$router.push({
        path: this.savePath
      })
    },
    // 跳转到编辑
    goEdit(id) {
      this.$router.push({
        path: this.savePath,
        query: { id },
      })
    },
    // 删除
    handleDeleteOne(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let res = await deleteById(this.apiName, id)
          this.$message.success('删除成功')
          this.getAllList(this.apiName)
        })
        .catch(() => {})
    },
    showDetail(id) {
      this.detailId = id
      this.getDetail(this.apiName,id)
      this.detailDialog = true
    },
    async getDetail(url,id) {
      let res = await commonApi.info(url,id)
      this.detailForm = res.data.data
    },
    // 关闭详情页
    closeDetail() {},
  },
}
</script>

<style lang="scss" scoped>
</style>